<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0037)http://www.duobei.com/settings/avatar -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<title>多贝网 - 个人设置 - 修改头像</title>
	
	<link href="./photo_files/avatar_setting.css" rel="stylesheet" type="text/css">
	<link type="text/css" href="./photo_files/jquery.Jcrop.min.css" rel="stylesheet" charset="utf-8" media="screen">

	<script type="text/javascript" async="" src="./photo_files/ga.js"></script><script src="./photo_files/less-1.3.0.min.js" type="text/javascript" charset="utf-8"></script><script src="./photo_files/jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script><script src="./photo_files/jquery.custom-file-input.js" type="text/javascript" charset="utf-8"></script><script src="./photo_files/jquery.form.js" type="text/javascript" charset="utf-8"></script><script src="./photo_files/jquery.Jcrop.min.js" type="text/javascript" charset="utf-8"></script><script src="./photo_files/duobei.imgscissors.min.js" type="text/javascript" charset="utf-8"></script><script src="./photo_files/message-zh.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">
	$(function() {
		var formIndex = 1;	//1为上传，0为选择默认

		//显示系统头像(formIndex = 0)
		$('.choose-avatar').click(function() {
			$('#cropForm').hide();
			$('#chooseForm').show();
			$(".li-choose").addClass("current");
			$(".li-file").removeClass("current");
			$('.avatar-error').hide();
			formIndex = 0;
			
			$.ajax({
				async		: false,
				context		: $(this),
				url			: $(this).attr('href'),
				type		: 'get',
				dataType	: 'html',
				beforeSend	: function(xhr) {
					xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
				},
				success		: function(html) {
					$(this).parents('.avatar-setting-box').find('table').replaceWith(html);
				}
			});
			return false;
	    });
		
		//系统头像翻页(formIndex = 0)
		$('.page_turn').live('click', function() {
			$.ajax({
				async		: false,
				context		: $(this),
				url			: $(this).attr('href'),
				type		: 'get',
				dataType	: 'html',
				beforeSend	: function(xhr) {
					xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
				},
				success: function(html){
					$(this).parents('table').replaceWith(html);
				}
			});
			return false;
		});
		
		//选择系统头像(formIndex = 0)
		$('.sys-avatar').live('click',function() {
			$('a[class="on-choose"]').next().hide();
			$('a[class="on-choose"]').attr('class', 'sys-avatar');
			$(this).next().show();
			$(this).attr('class', 'on-choose');
			$('#sysAvatarId').val($(this).parent().find('input').val());
			$('.avatar-null').hide();
		});
		
		//提交选择的系统头像(formIndex = 0)
		$('#chooseForm').submit(function() {
			var $avatarImg = $(window.parent.document).find('.upload-imgs img');
			$.ajax({
				async		: false,
				url			: $(this).attr('action'),
				type		: 'post',
				dataType	: 'json',
				data		: $(this).serialize(),
				beforeSend	: function(xhr) {
					xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
				},
				success		:function(json){
					$avatarImg.attr('src',"http://avatar.duobei.com/" + json.avatarLarge);
					window.top.$.wokaobox.close();
				}
			});
			return false;
		});
		
		//显示本地上传(formIndex = 1)
		$('.file-avatar').click(function() {
			$('#cropForm').show();
			$('#chooseForm').hide();
			$(".li-choose").removeClass("current");
			$(".li-file").addClass("current");
			$('.avatar-error').hide();
			formIndex = 1;
			
			return false;
	    });
		
		//点击头像上传按钮
		$('#avatar_upload').file(function(inp) {
			$('#avatar').remove();
			inp.id = inp.name = 'avatar';
			$('#uploadForm').append(inp);
			
			$('#photo').remove();
			$('#avatar_upload').hide();
			$('#avatar_uploading').show();
			$('.avatar-error').hide();

			//上传图片
			$('#uploadForm').ajaxSubmit({
				async		: false,
				url			: $('#uploadForm').attr('action'), 
				type		: 'post',
				dataType	: 'xml',
				beforeSend	: function(xhr) {
					 xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
				},
				success		: function(responseXML) {
					if($('success', responseXML).text() === 'true') {
						var avatarName = $('avatarName', responseXML).text()
						  , avatarHeight = $('avatarHeight', responseXML).text()
						  , avatarWidth = $('avatarWidth', responseXML).text()
						  , avatar_w_h_ratio = $('avatar_w_h_ratio', responseXML).text()
						  , avatar_h_w_ratio = $('avatar_h_w_ratio', responseXML).text();
						
						$('#avatarName').val(avatarName);
						$('#imgHeight').val(avatarHeight);
						$('#imgWidth').val(avatarWidth);
						$('#img_h_w_ratio').val(avatar_h_w_ratio);
						$('#img_w_h_ratio').val(avatar_w_h_ratio);
						
						if(avatar_w_h_ratio >= 1) {
							$('<img id="photo" src="http://avatar.duobei.com/temp/' + avatarName + '" width="220" height="'+ 220 * avatar_h_w_ratio +'"/>').appendTo($('#photo_wrap'));
							$('#photo_wrap').css('top', 110 * (1 - avatar_h_w_ratio));
						} else {
							$('<img id="photo" src="http://avatar.duobei.com/temp/' + avatarName + '" width="'+ 220 * avatar_w_h_ratio +'" height="220"/>').appendTo($('#photo_wrap'));
							$('#photo_wrap').css('top', 0);
						}
						$('#preview').attr('src','http://avatar.duobei.com/temp/' + avatarName);
						
						$('#choose-img').hide();
						$('#format-tip').hide();
						$('.avatar-error').hide();
						$('#avatar_uploading').fadeOut();
						$('#avatar_upload').show();
						$('.avatar-img').show();
						$('#preview').show();
						
						//销毁现有的imgscissors对象
						$.imgscissors.destroy();
						
						//调用图片裁剪插件
						$('#photo').imgscissors({
							imgWidth		: avatarWidth,
							imgHeight		: avatarHeight,
							minHeight		: 120,
							previewHeight	: 120,
							errorWrap		: 'avatar_error'
						});
					} else {
						var typeError = $('typeError', responseXML).text()
						  , sizeError = $('sizeError', responseXML).text();

						$('.avatar-error').hide();
						$('#avatar_upload').show();
						$('#avatar_uploading').fadeOut(function() {
							if(typeError != null && typeError != '') {
								$('.format-error').text(messages.uploadValidImgType).show();
							} else if(sizeError != null && sizeError != '') {
								$('.format-error').text(messages.imageOverSize).show();
							} else {
								$('.format-error').text('上传图片发生错误').show();
							}
							//销毁现有的imgscissors对象并隐藏上一次 传的图
							$.imgscissors.destroy();
							$('#photo').remove();
							$('#preview').hide();
							$('#avatarName').val('');
							$('#choose-img').show();
							$('#format-tip').show();
						});
					}
					return false;
				}
			});
		});
		
		//取消上传图片(formIndex = 1)
		$('#cancel_img_btn').click(function() {
			location.reload();
		});
		
		//提交本地上传的图片(formIndex = 1)
		$('#cropForm').submit(function() {
			if($('#x').val()=='') {
				return false;
			}
			var avatar_img = $(window.parent.document).find('.upload-imgs img');
			$.ajax({
				async		: false,
				url			: $(this).attr('action'),
				type		: 'post',
				dataType	: 'json',
				data		: $(this).serialize(),
				beforeSend	: function(xhr) {
					xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
				},
				success		: function(json) {
					avatar_img.attr('src',"http://avatar.duobei.com/" + json.savePath + '/' +json.avatarLarge);
					window.top.$.wokaobox.close();
				}
			});
			return false;
		});  
		 
		//保存头像 
		$('.save-btn').click(function() {
			if(formIndex == 1) {
				if($('#avatarName').val()=='') {
					$('.format-error').hide();
					$('.avatar-null').text(messages.uploadAvatar).show();
					return false;
				} else {
					$('#cropForm').submit();
				}
			} else{
				if($('#sysAvatarId').val()=='') {
					$('.avatar-null').text(messages.chooseAvatar).show();
					return false;
				} else {
					$('#chooseForm').submit();
				}
			}
		});
		
		$('.cancel-btn').click(function(){
			window.top.$.wokaobox.close();
		});
	});
	</script>
	<script type="text/javascript">
	var _gaq = _gaq || [];
	_gaq.push(['_setAccount', 'UA-27089053-1']);
	_gaq.push(['_setDomainName', 'duobei.com']);
	_gaq.push(['_trackPageview']);
</script>
</head><link rel="stylesheet" type="text/css" href="data:text/css,">

<body id="avatar_setting">
	<div class="avatar-setting-box content">
		<h2 class="pop_header">设置头像</h2>
		<div class="pop_header_shadow"></div>
	
		<ul class="avatar-tab cf">
			<li class="current li-file fl"><a href="http://www.duobei.com/settings/avatar#" class="file-avatar">上传本地头像</a></li>
			<li class="li-choose fl"><a href="http://www.duobei.com/settings/avatar/1?index=true" class="choose-avatar">选择默认头像</a></li>
			<li class="lastbg fl"></li>
		</ul>

		<form action="http://www.duobei.com/settings/avatar/choose" method="post" id="chooseForm">
			<table style="display:none;"></table>
		</form>

		<form action="http://www.duobei.com/settings/avatar/crop" method="post" id="cropForm">
			<div id="upload">
				<div class="upload_status">
					<div id="avatar_upload" class="upload-img"><img src="./photo_files/upload-img-153-32-20111227.png"><div style="position: absolute; overflow-x: hidden; overflow-y: hidden; opacity: 0; zoom: 1; width: 153px; height: 32px; z-index: 1; top: 0px; left: 0px; "><input multiple="" type="file" style="cursor:pointer; border:none; position:absolute" title="点击上传图片"></div></div>
					<div id="avatar_uploading" style="display: none;">
						<div class="upload-img" id="cancel_img_btn"><img src="./photo_files/cancel-load-img.png"></div>
						<img src="./photo_files/uploading-32-32-20111227.gif" id="uploading" style="margin-left: 24px;">
					</div>
					<span class="avatar-error format-error" id="avatar_error" style="display:none;"></span>
				</div>

				<div class="cf">
					<div class="avatar-loaded fl">
						<p class="choose-img" id="choose-img">选择您要上传的图片</p>
						<p class="format format-tip" id="format-tip">仅支持jpg、png、bmp格式图片，且文件小于1M</p> 
						<div class="avatar-img" id="photo_wrap" style="display:none;"></div>
					</div>

					<div class="cutted-img fl">
						<h3>头像预览</h3>
						<div class="preview" id="previewAvatar">
							<img src="" style="display:none;" id="preview">
						</div>
						<p class="format">120×120</p>
					</div>
				</div> 
				<p class="crop-tip">（拖拽或缩放线框，生成满意的头像）</p>

				<input type="hidden" value="" id="imgWidth">
				<input type="hidden" value="" id="imgHeight">
				<input type="hidden" value="" id="img_h_w_ratio">
				<input type="hidden" value="" id="img_w_h_ratio">

				<input type="hidden" name="x" id="x">
				<input type="hidden" name="y" id="y">
				<input type="hidden" name="x2" id="x2">
				<input type="hidden" name="y2" id="y2">
				<input type="hidden" name="width" id="w">
				<input type="hidden" name="height" id="h">
				<input type="hidden" name="avatarName" id="avatarName">
			</div>
		</form>
		<form enctype="multipart/form-data" action="./photo_files/photo.htm" method="post" id="uploadForm" style="display: none;"></form>
	
		<p class="submit-p-btn">
			<input type="button" class="save-btn" id="save_btn" value="保  存">
			<input type="button" class="cancel-btn" value="取  消">
		</p>
		<span class="avatar-error avatar-null" style="display:none;"></span>
	</div>
	<div style="display:none;">
	<img src="./photo_files/piwik.php" style="border:0" alt="">
</div>
<script type="text/javascript">
	(function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	})();
</script>

</body></html>